<!DOCTYPE html/>
<html manifest="/index.manifest">
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <title>Omron</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin:0;
        padding:0;
        background-color: #ffb670;
      }
      .bg-img {
        width: 100%;
      }
      #container {
        background-image: url('/src/img/bg/2.png');
        background-size: 100%;
        background-repeat: no-repeat;
        height: 594px;
        width: 100%;
        position: relative;
      }
      .popout {
        animation-name: popout;
        animation-duration: .7s;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
        animation-iteration-count: 1;
        animation-direction: alternate;
        animation-play-state: running;
      }
      .move {
        animation-name: move;
        animation-duration: 3s;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction:  alternate;
        animation-play-state: running;
      }
      @keyframes popout {
          0% {
            transform: scale(0);
          }
          70% {
            transform: scale(1.2) ;
          }
          100% {
            transform: scale(1) translateY(0px);
          }
      }
      @keyframes move {
          0% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(10px);
          }
          100% {
            transform: translateY(-10px);
          }
      }
      .img-bubble {
        position: absolute;
        transform: scale(0) translateY(0px);
      }
      .bubble-1 {

        left: 250px;
        top: 10.5rem;
        width: 54px;
        height: 53px;
      }
      .bubble-2 {
        left: 215px;
        top: 121px;
        width: 46px;
        height: 46px;
      }
      .bubble-3 {
        width: 46px;
        height: 45px;
        left: 70px;
        top: 80px;
      }
      .bubble-4 {
        width: 44px;
        height: 44px;
        left: 105px;
        top: 130px;
      }
      .bubble-5 {
        width: 68px;
        height: 69px;
        left: 250px;
        top: 55px;
      }
      .bubble-6 {
        width: 58px;
        height: 58px;
        left: 185px;
        top: 20px;
      }
      .bubble-7 {
        height: 50px;
        width: 50px;
        left: 110px;
        top: 30px;
      }
      .bubble-8 {
        height: 53px;
        width: 53px;
        top: 185px;
        left: 80px;
      }
    </style>
  </head>
  <body>
    <div id='main_container'>
      <img src='/src/img/bg/1.png' class='bg-img' />
      <div id='container'></div>
      <img src='/src/img/bg/3_mall.png' class='bg-img' />
      <img src='/src/img/bg/4.png' class='bg-img' id='yhq' />
      <img src='/src/img/bg/5.png' class='bg-img' id='store' />
    </div>
    <script>
      (function(win) {
        var container = document.querySelector('#container')
        var yhqEl = document.querySelector('#yhq')
        var storeEl = document.querySelector('#store')
        var count = 0
        var originalWidth = 375
        var screenWidth = window.screen.width
        if (screenWidth === 414) {
          container.style.height = '655px'
        }
        var linkTo = function(s) {
          location.href = s
        }
        yhqEl.onclick = function() {
          linkTo('https://m.tb.cn/h.3Iso69L')
        }
        storeEl.onclick = function() {
          linkTo('https://m.tb.cn/h.3rhmeHg?sm=0b7014')
        }
        while(++count <= 8) {
          var img = new Image()
          img.src = '/src/img/' + count + '.png'
          img.style.animationDelay = 0.3 * count + 's'
          img.className = 'img-bubble bubble-' + count + ' popout'

          img.addEventListener('animationend', function(e) {
            var currImg = e.currentTarget
            currImg.className = currImg.className.replace(/popout/g, '') + 'move'
            currImg.style.animationDelay = '0s'
          }, false)

          container.appendChild(img)

          var currentLeft = parseInt(getComputedStyle(img).left)

          img.style.left = parseInt(currentLeft * (screenWidth / originalWidth)) + 'px'
        }
      })(window)
    </script>
  </body>
</html>
